<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-button
                        type="primary"
                        icon="el-icon-s-flag"
                        size="medium"
                        @click="add()"
                >新增攒钱目标
                </el-button
                >
                <el-button
                        type="primary"
                        icon="el-icon-notebook-2"
                        size="medium"
                        @click="withdraw"
                >取钱
                </el-button
                >
                <el-button
                        type="primary"
                        icon="el-icon-notebook-2"
                        size="medium"
                        @click="save"
                >存钱
                </el-button
                >
                <el-button
                        type="primary"
                        icon="el-icon-s-flag"
                        size="medium"
                        @click="edit"
                >修改攒钱目标
                </el-button
                >
            </el-col>
        </el-row>
        <el-container>
            <el-aside style="margin-top: 22px;" width="450px">
                <el-card style="height: 700px">
                    <template #header>
                        <div class="clearfix">
                            <span style="font-size: 16px">攒钱目标列表</span>
                        </div>
                    </template>
                    <center>
                        <div style="cursor: pointer">
                            <p @click="getTb(item._id)" style="line-height: 2.5" v-for="(item,index) in moneyGoalList" :key="index">
                                <span style="font-size: 15px;color: #48b5e8">{{item.goal_desc}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <span style="font-size: 15px;color: #129f4b">目标金额：{{item.goal_price}}元&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                <span style="font-size: 15px;color: orange">完成金额：{{item.curMoneyTotal}}元</span>
                                <el-progress style="width: 360px"
                                             :percentage="(item.curMoneyTotal/item.goal_price*100).toFixed(2)-0"
                                             :color="customColorMethod"></el-progress>
                            </p>
                        </div>
                    </center>
                </el-card>
            </el-aside>
            <el-main>
                <div style="height: 600px">
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-card shadow="hover" class="mgb20">
                                <template #header>
                                    <div class="clearfix">
                                        <span style="font-size: 16px">攒钱分布图</span>
                                    </div>
                                </template>
                                <div
                                        style="height: 230px; width: 720px"
                                        id="retain"
                                        ref="retain"
                                ></div>
                            </el-card>
                        </el-col>
                        <el-col :span="24">
                            <el-card shadow="hover" class="mgb20">
                                <template #header>
                                    <div class="clearfix">
                                        <span style="font-size: 16px">时长分布图</span>
                                    </div>
                                </template>
                                <div
                                        style="height: 290px; width: 720px"
                                        id="minute"
                                        ref="minute"
                                ></div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>
            </el-main>
        </el-container>
        <el-dialog
                width="30%"
                title="新增攒钱计划"
                :visible.sync="goaldialogFormVisible"
        >
            <el-form :model="goalform">
                <el-form-item label="用途" :label-width="formLabelWidth">
                    <el-input v-model="goalform.goal_desc" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目标金额" :label-width="formLabelWidth">
                    <el-input v-model="goalform.goal_price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <center>
                <el-button type="primary" @click="goalsure"
                >提交
                </el-button
                >
                </center>
            </div>
        </el-dialog>
        <el-dialog
                width="30%"
                title="修改攒钱计划"
                :visible.sync="editdialogFormVisible"
        >
            <el-form :model="goalform">
                <el-form-item label="名称" :label-width="formLabelWidth">
                    <el-select @change="getInfo(mg_id)" v-model="mg_id" placeholder="请选择类型">
                        <el-option
                                v-for="item in moneyGoalList"
                                :key="item.value"
                                :label="item.goal_desc"
                                :value="item._id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用途" :label-width="formLabelWidth">
                    <el-input v-model="goalform.goal_desc" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="目标金额" :label-width="formLabelWidth">
                    <el-input v-model="goalform.goal_price" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <center>
                <el-button type="primary" @click="editMoney"
                >提交
                </el-button
                >
                </center>
            </div>
        </el-dialog>
        <el-dialog
                width="30%"
                title="取钱"
                :visible.sync="withdrawdialogFormVisible"
        >
            <el-form :model="withdrawform">
                <!--<el-form-item label="用途" :label-width="formLabelWidth">
                    <el-input
                            v-model="withdrawform.record_desc"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>-->
                <el-form-item label="金额" :label-width="formLabelWidth">
                    <el-input
                            v-model="withdrawform.price"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="资金撤出" :label-width="formLabelWidth">
                    <el-select v-model="withdrawform.mg_id" placeholder="请选择类型">
                        <el-option
                                v-for="item in moneyGoalList"
                                :key="item.value"
                                :label="item.goal_desc"
                                :value="item._id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <center>
                    <el-button type="primary"  @click="takeOut"
                    >确定取出
                    </el-button>
                </center>
            </div>
        </el-dialog>
        <el-dialog
                width="30%"
                title="存钱"
                align="center"
                :visible.sync="savingdialogFormVisible"
        >
            <el-form :model="savingform">
                <el-form-item label="资金来源" :label-width="formLabelWidth">
                    <el-input v-model="savingform.record_desc" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="存入金额" :label-width="formLabelWidth">
                    <el-input
                            v-model="savingform.price"
                            autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="耗时天数" :label-width="formLabelWidth">
                    <el-input v-model="savingform.record_day" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="资金注入" :label-width="formLabelWidth">
                    <el-select v-model="savingform.mg_id" placeholder="请选择类型">
                        <el-option
                                v-for="item in moneyGoalList"
                                :key="item.value"
                                :label="item.goal_desc"
                                :value="item._id"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <center>
                    <el-button type="primary" @click="savingsure"
                    >确定存入
                    </el-button>
                </center>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {commitRecord, commitGoal, reqMoneyGoalList, reqMoneyInfo, editMoney, zqhs} from "@/api";

    import {mapState, mapGetters} from "vuex";

    export default {
        name: "index",
        data() {
            return {
                btData:[],
                mg_id: "",
                moneyGoalList: [],
                withdrawform: {
                    is_delete: false,
                    record_desc: "",
                    price: "",
                    mg_id: "",
                },
                savingform: {
                    is_delete: false,
                    record_day: "",
                    record_desc: "",
                    price: "",
                    mg_id: "",
                },
                goalform: {
                    _id: "",
                    is_delete: false,
                    goal_price: "",
                    user_id: "",
                    goal_desc: "",
                },

                formLabelWidth: "120px",
                savingdialogFormVisible: false,
                withdrawdialogFormVisible: false,
                goaldialogFormVisible: false,
                editdialogFormVisible: false,


            };
        },

        mounted() {
            this.getMoneyGoal();
            this.drawretain();
            this.drawminute();

        },
        methods: {
            getTb(id){
                zqhs(id).then(res=>{
                    let data=res.data.data;
                    let dataName=[];
                    let dataValue=[]
                    for (let i = 0; i <data.length; i++) {
                        dataName.push(data[i].record_desc)
                        dataValue.push(data[i].day_sum)
                    }
                    let minute_dv = this.$refs.minute;
                    if (minute_dv) {
                        let minute = this.$echarts.init(minute_dv);
                        // 绘制图表
                       let option = {
                            xAxis: {
                                type: 'category',
                                data: dataName
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: dataValue,
                                    type: 'line'
                                }
                            ]
                        };

                        minute.setOption(option);
                    }
                })
            },
            add(){
                this.goaldialogFormVisible=true;
                Object.keys(this.goalform).forEach((key) => {
                    this.goalform[key] = "";
                });
            },
            withdraw(){

                Object.keys(this.withdrawform).forEach((key) => {
                    this.withdrawform[key] = "";
                });
                this.withdrawdialogFormVisible = true;
            },
            save(){
                this.savingdialogFormVisible = true
                Object.keys(this.savingform).forEach((key) => {
                    this.savingform[key] = "";
                });
            },
            edit(){

                this.mg_id='';
                this.goalform.goal_price="";
                this.goalform.goal_desc="";
                this.editdialogFormVisible = true
            },
            customColorMethod(percentage) {
                if (percentage < 30) {
                    return '#909399';
                } else if (percentage < 70) {
                    return '#e6a23c';
                } else {
                    return '#67c23a';
                }
            },
            getMoneyGoal() {
                let params = {
                    page: 1,
                    limit: 100,
                    user_id: this.userInfo._id
                }
                reqMoneyGoalList(params).then(res => {
                    this.moneyGoalList = res.data.data;
                })
            },
            getInfo(id) {
                reqMoneyInfo(id).then(res=>{
                    this.goalform=res.data.data;
                })
            },
            editMoney(){
              let editParams=  Object.assign(this.goalform,{
                    createdAt:undefined,
                    updatedAt:undefined
                })
                editMoney(editParams).then(res=>{
                    this.editdialogFormVisible=false;
                    this.$message.success('修改成功')
                    this.getMoneyGoal();
                    this.drawretain()
                })
            },
            savingsure() {
                let savingparams = {
                    price: this.savingform.price-0,
                    record_desc: this.savingform.record_desc,
                    record_day: this.savingform.record_day-0,
                    is_delete: false,
                    mg_id: this.savingform.mg_id,
                }
                commitRecord(savingparams).then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success("存入成功！")
                        this.savingdialogFormVisible = false;
                        this.getMoneyGoal();
                    }
                })
            },
            takeOut(){
                let takeOutparams = {
                    price:"-"+this.withdrawform.price-0,
                    record_desc: this.withdrawform.record_desc,
                    is_delete: false,
                    mg_id: this.withdrawform.mg_id,
                }
                commitRecord(takeOutparams).then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success("取出成功！")
                        this.withdrawdialogFormVisible = false;
                        this.getMoneyGoal();
                    }
                })
            },
            goalsure() {
                let goalparams = {
                    goal_price: this.goalform.goal_price,
                    is_delete: false,
                    goal_desc: this.goalform.goal_desc,
                    user_id: this.userInfo._id,
                }
                commitGoal(goalparams).then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success("新增成功！");
                        this.goaldialogFormVisible = false;
                        this.getMoneyGoal();
                        this.drawretain();
                    }
                })
            },
            drawretain() {
                let params = {
                    page: 1,
                    limit: 100,
                    user_id: this.userInfo._id
                }
                reqMoneyGoalList(params).then(res => {
                    this.btData = res.data.data.map(item=>{
                        return{
                            value:item.goal_price,
                            name:item.goal_desc
                        }
                    })
                    let retain_dv = this.$refs.retain;
                    if (retain_dv) {
                        let retain = this.$echarts.init(retain_dv);
                        // 绘制图表
                        retain.setOption({
                            tooltip: {
                                trigger: "item",
                            },
                            legend: {
                                top: "",
                                left: "center",
                            },
                            series: [
                                {
                                    name: "",
                                    type: "pie",
                                    radius: ["40%", "70%"],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: "center",
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: "16",
                                            fontWeight: "bold",
                                        },
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    data: this.btData
                                },
                            ],
                        });
                    }
                })



            },
            drawminute() {
                let params = {
                    page: 1,
                    limit: 100,
                    user_id: this.userInfo._id
                }
                let id=''
                reqMoneyGoalList(params).then(res => {
                    id= res.data.data[0]._id
                    zqhs(id).then(res=>{
                        let data=res.data.data;
                        let dataName=[];
                        let dataValue=[]
                        for (let i = 0; i <data.length; i++) {
                            dataName.push(data[i].record_desc)
                            dataValue.push(data[i].day_sum)
                        }
                        let minute_dv = this.$refs.minute;
                        if (minute_dv) {
                            let minute = this.$echarts.init(minute_dv);
                            // 绘制图表
                            let option = {
                                xAxis: {
                                    type: 'category',
                                    data: dataName
                                },
                                yAxis: {
                                    type: 'value'
                                },
                                series: [
                                    {
                                        data: dataValue,
                                        type: 'line'
                                    }
                                ]
                            };

                            minute.setOption(option);
                        }
                    })

                })


            },
        },

        computed: {
            ...mapState({}),
            ...mapGetters(['userInfo'])
        },
    };
</script>

<style>
    .btn_margin {
        margin-left: 19px;
    }

    .demo-table-expand {
        font-size: 0;

    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-left: 30px;
        margin-bottom: 0;
        width: 50%;
    }

    .el-aside {
        background-color: #f8f9fa;
    }

    .el-main {
        background-color: #f8f9fa;
    }
</style>